<template>
  <div class="text-center">
    <!-- 内容 -->
    <el-carousel
      class="paomadeng"
      :interval="6000"
      type="card"
      height="300px"
      trigger="click"
    >
      <el-carousel-item
        class="paomadeng-item"
        v-for="(item, index) in songList.marqueeSongList"
        :key="index"
      >
        <div @click="toSongDetails(item)">
          <img v-lazy="item.al.picUrl" alt="" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import useUserStore from "../../pinia/user";
import { reqRecommendSongs } from "../../axios/songListOrSong";
import { useRouter } from "vue-router";

// Pinia仓库
const userStore = useUserStore();
// 路由
const router = useRouter();

let songList = reactive({
  // 跑马灯的歌曲
  marqueeSongList: [],
});
// 跳转到歌曲详情页面
function toSongDetails(item) {
  router.push({
    name: "SongDetails",
    params: {
      songId: item.id,
    },
  });
}
async function tuijianSong() {
  const { data: a } = await reqRecommendSongs();
  console.log("yjhyjh", a);
  songList.marqueeSongList = a.data.dailySongs;
}

onMounted(async () => {
  await tuijianSong();
});
</script>

<style lang="less" scoped>
.text-center {
  width: 1100px;
  margin-top: 10px;
  .paomadeng {
    .paomadeng-item {
      display: flex;
      flex-direction: row;
      justify-content: center;
      div {
        width: 300px;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
